<template>
  <div id="SelectIcon">
    <el-dialog
      v-model="showDialogIco"
      title="选择图标"
      width="860px"
      class="eldialog"
      draggable
      :fullscreen="showFullscreen"
      @dblclick="fullscreenHandler"
    >
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-scrollbar :height="showFullscreen === true ? '100%' : '500px'">
          <el-tab-pane label="系统图标" name="first">
            <template v-for="(ico, index) in iconList" :key="index">
              <div class="iconBox" @click="selectIcon(ico)">
                <el-icon size="20" class="icon">
                  <component :is="ico"></component>
                </el-icon>
                <div>{{ ico }}</div>
              </div>
            </template>
          </el-tab-pane>
        </el-scrollbar>

        <el-tab-pane label="公共图标" name="second">Config</el-tab-pane>
        <el-tab-pane label="检验图标" name="third">Role</el-tab-pane>
        <el-tab-pane label="设备图标" name="fourth">Task</el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
let { proxy }: any = getCurrentInstance();
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
let showDialogIco = ref(false); //弹窗状态
let activeName = ref('first'); //tab页签默认选中的值
let iconList = reactive([]); //系统图标数组
let checkedIcon = ref(''); //选中的图标
let showFullscreen = ref(false); //弹窗是否全屏

onMounted(() => {
  for (const [key] of Object.entries(ElementPlusIconsVue)) {
    iconList.push(key);
  }
});

//暴露属性和方法
defineExpose({
  initPage
});

// 将父组件传递来的值给子组件变量
function initPage(val) {
  showDialogIco.value = val;
}

// 选中后向父组件传值
function selectIcon(ico) {
  showDialogIco.value = false;
  proxy.$emit('SelectIcon', ico);
}

// 双击全屏
function fullscreenHandler() {
  showFullscreen.value = !showFullscreen.value;
}
</script>
<style lang="scss" scoped >
.iconBox {
  display: inline-block;
  flex-wrap: wrap;
  border: 1px solid $border-color-3;
  margin-right: 5px;
  margin-bottom: 5px;
  width: 130px;
  vertical-align: bottom;
  text-align: center;
}
.icon {
  vertical-align: bottom;
}
:deep(.el-dialog) {
  position: relative;
  overflow: auto;
}
:deep(.el-dialog__header) {
  padding: 10px;
}

:deep(.el-dialog__body) {
  padding: 10px;
  overflow: auto;
}
:deep(.el-tabs__content) {
  overflow: auto;
}
</style>